<template>
  <div class="main">
    <!-- 规则介绍页 -->
    <div v-if="page == 0">
      <introduce :title="title" :time="time" :desc="desc" @nextPage="nextPage" />
    </div>

    <!-- 做题页面 -->
    <div v-else-if="page == 1" class="test">
      <div class="tag">
        <div v-for="count in 10" v-bind:key="count">
          <myinput :number="count" @changeInput="changeInput"></myinput>
        </div>
        <el-button type="primary" round @click="submitTenWord" style="margin-top: 30px">提交
        </el-button>
      </div>
    </div>

    <!-- 结果显示页面 -->
    <div v-else style="font-size: 30px">
      <myresult :wordList="wordlist" :score="score" :scorematrix="scorematrix"></myresult>
      <div class="next-btn">
        <el-button type="primary" round @click="nextAss">继续测评</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import introduce from "./../com/introduce.vue";
import myinput from "./myinput.vue";
import myresult from "./result.vue";

import {CreativeCalc} from "./../../../api/access"

export default {
  name: "asscreative",
  data: function () {
    return {
      page: 0, //  当前页
      title: "发散性思维测试", //介绍页标题
      time: "4",
      desc: "发散性思维以创新型的创造力为核心，" + 
        "<br/>衡量创造力的传统算法需耗费大量的时间来探求一个人的思维水平，然本研究通过算法将创造力量化，减少参与者脑补的活动量，同时可保证信度效度优于传统算法，<br/>仅仅需要测试者在四分钟的有限时间内输入十个互不相关的非专有名词，<br/>请开始你的测试吧",
      wordlist: null, // 输入的十个单词
      score: 0,
      scorematrix: null,
    };
  },
  components: { introduce, myinput, myresult },
  created() {
    this.wordlist = new Array(10);
  },
  methods: {
    openMsg: function (msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type,
      });
    },
    // 由介绍页到第一页
    nextPage: function () {
      this.page = 1;
    },
    //做题页面点击提交按钮
    submitTenWord: function () {
      console.log(this.wordlist);
      // 去重
      let count = 0;
      this.wordlist.forEach((element) => {
        if (element != null) count += 1;
      });
      console.log(count);
      if (count < 7) {
        this.openMsg("至少输入七个单词", "error");
        return;
      }
      CreativeCalc({
        wordlist: this.wordlist,
        uid: this.$store.state.User.uid,
      }).then(res=>{
        if(res.rescode==200){
          this.score = res.score;
          this.scorematrix = res.matrix;
          this.page = 2;
        }
      })
    },
    changeInput(data) {
      console.log(data.number);
      this.wordlist[data.number - 1] = data.input;
    },
    nextAss: function () {
      this.$emit("nextAss");
    },
  },

};
</script>

<style scoped>
.main {
  box-sizing: border-box;
  height: 100%;
  height: 100%;
}

.test {
  width: 850px;
  height: 766px;
  margin: auto;
  background-image: url("/static/ass01/tag11.jpg");
  background-repeat: no-repeat;
  background-size: 850px 766px;
  position: relative;
}

.tag {
  position: absolute;
  top: 144px;
  left: 235px;
  width: 390px;
  height: 480px;
}

.tag-item {
  width: 100%;
  height: 48px;
  line-height: 48px;
}
</style>
